<template>
  <div class="image-banner">
    <div class="image-banner-wrap" :style="wrapStyle()">
      <div class="banner-item" :style="itemStyle()">
        <template v-if="compData.data.mode == 1 || compData.data.mode == 2">
          <sa-image
            v-if="compData.data.list.length > 0"
            :url="compData.data.list[0].src"
            fit="fill"
            radius="0"
            :suffix="null"
            :style="image1Style()"
          ></sa-image>
        </template>
        <template v-if="compData.data.mode == 2">
          <sa-image
            class="banner-right"
            v-if="compData.data.list.length > 1"
            :url="compData.data.list[1].src"
            fit="fill"
            radius="0"
            :suffix="null"
            :style="{
              height: compData.style.height - 100 + 'px',
              'margin-top': '-' + (compData.style.height - 100) / 2 + 'px',
              'border-radius': 0,
              'border-top-left-radius': compData.data.borderRadiusTop + 'px',
              'border-top-right-radius': compData.data.borderRadiusTop + 'px',
              'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
              'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
            }"
          ></sa-image>
        </template>
        <div class="indicator">
          <sa-icon
            :icon="'sa-shop-decorate-imageBanner-indicator-' + compData.data.indicator"
            size="30"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);

  function wrapStyle() {
    return {
      margin: `-${props.compData.data.space / 2}px`,
    };
  }

  function itemStyle() {
    return {
      padding: `${props.compData.data.space / 2}px`,
      height: `${props.compData.style.height - props.compData.style.padding}px`,
    };
  }

  function image1Style() {
    return {
      'border-radius': 0,
      'border-top-left-radius': props.compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': props.compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': props.compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': props.compData.data.borderRadiusBottom + 'px',
    };
  }
</script>

<style lang="scss" scoped>
  .image-banner {
    height: fit-content !important;
    .banner-item {
      position: relative;
      overflow: hidden;
    }
    .sa-image {
      border-radius: 0;
      height: 100%;
    }
    .indicator {
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -15px;
      :deep() {
        .sa-icon {
          color: #fff;
        }
      }
    }
    .banner-right {
      width: 375px;
      height: 100px;
      position: absolute;
      top: 50%;
      right: -364px;
    }
  }
</style>
